<template>
	<view class="content">
		<!-- <view class="zhuige-converge">

			<zhuige-scroll-ad v-if="recs" ext-ad-class="zhuige-scroll-coterie" title="话题推荐" :items="recs">
			</zhuige-scroll-ad>

		</view> -->
		<view class="zhuige-block" v-if="mys.length > 0">
			<view class="zhuige-block-head">
				<view>我的标签（总计 {{mys.length}} 个标签）</view>
			</view>
			<view class="zhuige-topic">
				<view v-for="(subject, index) in mys" :key="subject.id" @click="clickSubject(subject.id)"
					class="zhuige-topic-block">
					<view class="zhuige-topic-info">
						<view>
							{{index + 1}}
						</view>
						<view>
							<view>#{{subject.value}}</view>
							<view>{{subject.number}}个作品</view>
						</view>
					</view>
					<view class="zhuige-classify-join">
						<text>进入</text>
					</view>
				</view>
			</view>
		</view>
		<view class="zhuige-block">
			<view class="zhuige-block-head">
				<view>热门标签（TOP {{hots.length}}）</view>
			</view>
			<view class="zhuige-topic">
				<view v-for="(subject, index) in hots" :key="subject.id" @click="clickSubject(subject.id)"
					class="zhuige-topic-block">
					<view class="zhuige-topic-info">
						<view>
							{{index + 1}}
						</view>
						<view>
							<view>#{{subject.value}}</view>
							<view>{{subject.number}}个作品</view>
						</view>
					</view>
					<view class="zhuige-classify-join">
						<text>进入</text>
					</view>
				</view>
			</view>
		</view>

		<view class="zhuige-block">
			<view class="zhuige-block-head">
				<view>全部标签（总计 {{alls.length}} 个标签）</view>
			</view>
			<view class="zhuige-topic">
				<view v-for="(subject, index) in alls" :key="subject.id" @click="clickSubject(subject.id)"
					class="zhuige-topic-block">
					<view class="zhuige-topic-info">
						<view>
							{{index + 1}}
						</view>
						<view>
							<view>#{{subject.value}}</view>
							<view>{{subject.number}}个作品</view>
						</view>
					</view>
					<view class="zhuige-classify-join">
						<text>进入</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';
	import Auth from '@/utils/auth';

	import ZhuigeScrollAd from "@/components/zhuige-scroll-ad";

	export default {
		data() {
			return {
				hots: [],
				recs: [],
				alls: [],
				mys: [],
			}
		},

		components: {
			ZhuigeScrollAd,
		},

		onLoad(options) {
			Util.addShareScore(options.source);

			this.loadSetting();
			this.loadHotLable();
		},

		onShareAppMessage() {
			return {
				title: '标签-' + getApp().globalData.appName,
				path: Util.addShareSource('pages/plugins/subjects/subjects?n=n')
			};
		},

		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return {
				title: '标签-' + getApp().globalData.appName,
			};
		},
		// #endif

		methods: {
			/**
			 * 打开话题列表
			 */
			clickSubject(subject_id) {
				Util.openLink('/pages/bbs/list/list?subject_id=' + subject_id);
			},

			/**
			 * 加载配置
			 */
			loadSetting() {
				Rest.get(Api.queryLableStatistics).then(res => {
					this.alls = res.result.alls;
					this.mys = res.result.mys;
				}, err => {
					console.log(err)
				});
				
			},
			// 加载热门标签
			loadHotLable() {
				Rest.get(Api.queryHotLableBySize,{
					pageSize: Auth.getConfig().lable_page_size
				}).then(res => {
					if (res.success) {
						this.hots = res.result;
					}
				}, err => {
					console.log(err)
				});
			},
		}
	}
</script>

<style>
	.content {
		padding: 20rpx;
	}


	.zhuige-converge {
		padding-bottom: 20rpx;
	}

	.zhuige-topic-info>view:nth-child(1) {
		font-size: 40rpx;
		font-weight: 500;
		width: 128rpx;
		height: 100%;
		text-align: center;
		justify-content: center;
	}

	.zhuige-topic-info>view:nth-child(2) view:nth-child(1) {
		font-size: 28rpx;
	}

	.zhuige-classify-join text {
		font-size: 24rpx;
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 28rpx;
		border-radius: 48rpx;
		font-weight: 400;
		background: #EEEEEE;
	}

	.zhuige-topic-block {
		padding: 20rpx 0;
	}
</style>
